{% macro render1(room) %}
  <div class="card h-100" style="overflow: auto">
    <div class="card-body">
      <h4>任务描述</h4>
      <hr>
      <ol>
        {% for line in room.task.content['description'] %}
        <li class="ml-n3">{{ line }}</li>
        {% endfor %}
      </ol>
    </div>
  </div>
{% endmacro %}

{% macro render2(room) %}
  <div id="render2" class="card h-100" style="overflow: auto;">
    <div class="d-flex px-1 py-1" style="background-color: #fff; min-height: 40px;">
      <button @click="submitForm" class="btn btn-sm btn-danger px-3 ml-auto" disabled :disabled="!canSubmit">提交表单</button>
    </div>
    <table class="table table-striped table-bordered" style="table-layout: fixed; word-break: break-all; font-size: 14px; margin-bottom: 0;">
      <thead>
        <tr class="text-center">
          <th width="8%"></th>
          <th width="12%">id</th>
          <th width="16%">领域</th>
          <th width="24%">槽</th>
          <th width="40%">值</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in items" :key="index" class="text-center data-rows">
          <td><input v-model="item[4]" type="checkbox"></td>
          <td v-text="item[0]"></td>
          <td v-text="item[1]"></td>
          <td v-text="item[2]"></td>
          <td contenteditable spellcheck="false" v-text="prettify(item[3])" @input="item[3] = eatnl($event.target.innerText)"></td>
        </tr>
      </tbody>
    </table>
  </div>
{% endmacro %}

{% macro script(room) %}
  <script type="text/javascript">
    const vm2 = new Vue({
      el: '#render2',
      data () {
        return {
          canSubmit: false,
          items: JSON.parse('{{ room.task.content["items"]|tojson }}').map(item => item.concat(false))
        }
      },
      methods: {
        prettify (value) {
          if (value instanceof Array) {
            return value.join(' ')
          }
          return value
        },
        resetSelection () {
          this.items.forEach(item => (Vue.set(item, 4, false)))
        },
        eatnl (value) {
          return value.replace(/[\r\n]/g, '')
        },
        async submitForm () {
          if (!this.canSubmit) return
          if (this.items && !this.items.filter(item => item[4]).length) {
            if (!confirm('未选中任何内容，确定要发送吗？')) return
          }
          try {
            // console.log(JSON.parse(JSON.stringify(this.items)))
            await axios.post(`/room/{{ room.id }}/1/message/payload`, {
              payload: this.items
            })
            this.items.forEach(item => Vue.set(item, 4, false))
            this.canSubmit = false
          } catch (err) {
            console.error(err)
          }
        }
      },
      mounted () {
        if (window.localStorage['clientsideData{{ room.id }}']) {
          this.items = JSON.parse(window.localStorage['clientsideData{{ room.id }}'])
        }
        setInterval(() => {
          window.localStorage['clientsideData{{ room.id }}'] = JSON.stringify(this.items)
        }, 500)
      }
    })
  </script>
{% endmacro %}

{% macro style() %}
  <style type="text/css">
    .table td, .table th {
      padding: 4px 4px;
      outline: none;
      vertical-align: middle;
    }
  </style>
{% endmacro %}

